<template>
	<view class="safe-area-inset-bottom mine">
		<view class="header u-flex">
			<view class="" @click="logins">
				<u-avatar :src="userInfo.avatarUrl" mode="circle" :size="160"></u-avatar>
			</view>
			<view class="info">
				<view class="u-flex u-col-center">
					<view class="title">{{userInfo.nickName}}</view>
					<u-icon :name="userInfo.gender == 2 ? 'woman':'man'" :color="userInfo.gender == 2 ? '#FF7A99': '#2979ff'" size="40"></u-icon>
				</view>
				<view class="tips">
					{{userInfo.position}}
				</view>
			</view>
			<view class="">
				<u-button type="error" :custom-style="customStyle">个人主页</u-button>
			</view>
		</view>
		<Login-pop :show="login_modal_show" @close="closeLoginModal" />
		<bind-phone :show="bind_phone_show" @close="closePhoneModal"></bind-phone>
	</view>
</template>

<script>
	import LoginPop from 'components/login/index.vue'
	import BindPhone from 'components/login/bindphone.vue'
export default {
	components: {
		LoginPop,
		BindPhone
	},
  data() {
    return {
      customStyle : {
        backgroundColor: '#F56B79',
        color: '#FFFFFF',
        fontSize: '28rpx',
        width: '170rpx',
        height: '64rpx',
        borderRadius: '36rpx'
      },
      userInfo : {},
			login_modal_show: false,
			bind_phone_show: false
    }
  },
	onLoad() {
		this.userInfo = uni.getStorageSync('userInfo')
		console.log(this.userInfo)
	},
	methods: {
		logins() {
			this.login_modal_show = true
		},
		closeLoginModal() {
			this.login_modal_show = false
		},
		closePhoneModal() {
			this.bind_phone_show = false
		}
	}
}
</script>

<style lang="scss" scoped>
	.header {
		margin: 56rpx 34rpx 0 40rpx;
		
		.info {
			margin-left: 40rpx;
			height: 160rpx;
			padding-top: 26rpx;
		}
		.title {
			font-size: 40rpx;
			color: #404040;
			font-weight: bold;
			width: 264rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
		}
		.tips {
			color: #6E6E6E;
			font-size: 28rpx;
			margin-top: 14rpx;
		}
	}
</style>
